<template>
  <div class="todoapp">
    <!-- 头 -->
    <todo-header @add="add" :list="selectList"/>
    <!-- 主体 -->
    <todo-main :list="selectList" @del="doDel"/>
    <!-- 尾 -->
    <todo-footer :list="list" @selChange="status = $event" @clearDone="clear"/>
  </div>
</template>

<script>
// 导入组件
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  // 注册成子组件
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },

  data() {
    return {
      status: '全部',
      list: JSON.parse(localStorage.getItem('todos89')) || [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    };
  },

  methods: {
    // 添加任务
    add (task) {

      // 先取出数组中最后一个元素：当数组空了，长度就为0，那么这里再用
      // 长度-1会得到-1，所以你相当于用 -1 的下标去取数组元素，会越界，越界取到undefined
      // 相当于这里的last取到了undefined
      const last = this.list[this.list.length -1]
      // 如果能取到数据，就是true，如果取不到数据得到undefined,undefined就是false
      // const id = last ? last.id + 1 : 100
      const id = last == undefined ? 100 : last.id + 1
      this.list.push({
        id, // 如果你对undefined读取id，会报错
        name: task,
        isDone: false
      })
    },
    // 删除任务
    doDel (id) {

      // 根据id找到下标
      const index = this.list.findIndex(v => v.id == id) 
      // 然后删除这个下标
      this.list.splice(index, 1)
    },

    // 清空已完成
    clear () {
      // 把list里所有isDone为true的删掉
      // 所谓的把所有的isDone为true的删掉，反过来说
      // 就是把所有isDone为false给过滤出来
      this.list = this.list.filter(v => !v.isDone)
    }
  },

  computed: {
    selectList () {

      // 如果status是未完成，就返回未完成数组
      if (this.status == '未完成') {
    
        return this.list.filter( v => !v.isDone)

      }else if (this.status == '已完成') { // 如果status是已完成，就返回已完成的数组

        return this.list.filter( v => v.isDone)

      }else {
        // 否则就返回全部数组
        return this.list
      }
    }
  },

  watch: {
    list: {
      deep: true,
      handler () {
        
        localStorage.setItem('todos89', JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style>

</style>